<template>
  <div>
    <HeadView />
    <div class="content register account_box" >
    <div v-if="this.address" class="flex r_head">
      <img src="@/assets/img/avatars.png" alt="" srcset=""><h5>{{this.address}}</h5>
    </div>
    <div class="r_con">
      <div class="r_con_tabs">
        <p @click="onTabs(0)" :class="{'ups':tabs == 0}">Registrant</p>
        <p @click="onTabs(1)" :class="{'ups':tabs == 1}">Controller</p>
      </div>
      <div v-if="tabs == 0" v-loading="accountArr == null">
        <div class="card_list" v-if="this.accountArr && this.accountArr.length > 0">
          <div v-for="(item,i) in accountArr" :key="i">
            <CardView :title="item.labelName" />
          </div>
        </div>
        <div v-else>
          <p class="no_p">You did not create your domain name. <i class="blue"> Search a domain</i></p>
        </div>
      </div>
      
      <div v-if="tabs == 1" v-loading="controllerArr == null">
        <div class="card_list" v-if="this.controllerArr && this.controllerArr.length > 0">
          <div v-for="(item,i) in controllerArr" :key="i">
            <CardView :title="item.labelName" />
          </div>
        </div>
        <div v-else>
          <p class="no_p">You did not create your domain name. <i class="blue"> Search a domain</i></p>
        </div>
      </div>
      <!-- <div v-else>
        <p class="no_p">You did not create your domain name. <i class="blue"> Search a domain</i></p>
      </div> -->
    </div>
  </div>
  </div>
  
</template>

<script>
import CardView from '@/components/CardView.vue'
import HeadView from '@/components/HeadView.vue'
export default {
  data(){
    return{
      accountArr:null,
      controllerArr:null,
      tabs:0,
      address:null
    }
  },
  async mounted(){
    this.address = localStorage.getItem('address') || null
    console.log(this.address)
    if(this.address){
      this.onFetch(this.address)
    }else{
      this.accountArr = []
    }
  },
  methods: {
    onTabs(i){
      this.tabs = i
      if(i == 0){
        this.onFetch(this.address)
      }
      if(i == 1){
        this.getControlle(this.address)
      }
    },
    onFetch(addr){
      this.accountArr = null
      let _that = this
       fetch("/api/search/registrations", {
        method: "post",
        headers:{
          'Content-Type':'application/json;charset=UTF-8'
        },
        body: JSON.stringify({addr:addr})
      }).then(function (res) {
          console.log(res);
          return res.json();
      }).then(function (data) {
          console.log(data);
          if(data.code == 0){
            _that.accountArr = data.data.domains
          }else{
            _that.accountArr = []
          }
    })

    },
    getControlle(addr){
      this.controllerArr = null
      let _that = this
       fetch("/api/search/GetDomains", {
        method: "post",
        headers:{
          'Content-Type':'application/json;charset=UTF-8'
        },
        body: JSON.stringify({addr:addr})
      }).then(function (res) {
          console.log(res);
          return res.json();
      }).then(function (data) {
          console.log(data);
          if(data.code == 0){
            _that.controllerArr = data.data.domains
          }else{
            _that.controllerArr = []
          }
    })

    }
  },
  
  watch: {
    '$store.state.address':function(val){
        console.log('val')
        console.log(val)
        if(val){
          this.address = val
          this.onFetch(val)
        }
        if(!val){
          this.address = null
        }
      }
  },
  components: {
    HeadView,
    CardView,
  }
}
</script>

<style lang="less" scoped>
    .r_con_tabs{
      display: flex;
      width: 280px;
      flex-wrap: wrap;
      margin-bottom: 30px;
      align-items: center;
      border-radius: 40px;
      box-shadow: 0 0 2px #999;
      box-sizing:border-box;
      overflow: hidden;
      background: #fff;
      p{
        color: #aaa;
        text-align: center;
        flex: 1;
        border-radius: 40px;
        line-height: 40px;
        box-sizing:border-box;
        cursor: pointer;
      }
      .ups{
        color: #fff;
        font-weight: 600;
        background: #2481E2;
      }
    }
</style>
